<!--
 * @Author: liaoxing
 * @Date: 2021-08-16 15:21:00
 * @LastEditors: liaoxing
 * @LastEditTime: 2021-09-01 15:39:10
 * @Description: file content
 * @FilePath: \数据中心\src\views\home\BoardPage\DataBoard\charts\lineCharts.vue
-->
<template>
  <div :id="chatId" class="areaLineCharts"></div>
</template>

<script>
const echarts = require('echarts')
export default {
  name: 'annularchart',
  props: {
    id: {
      type: String,
    },
    dataInfo: {
      type: Object,
      default: () => {
        return {
          xAxis: ['8/8', '8/9', '8/10', '8/11'],
          data1: [220, 420, 160, 350],
          data2: [380, 140, 460, 200],
          data3: [400, 320, 420, 400]
        }
      }
    },
  },
  data() {
    return {
      chatId: '',
      option: null,
      myChart: null,
      fontSize: 12,
    }
  },
  created() {
    console.log(this.id)
    this.chatId = this.id
  },
  watch: {
    dataInfo: {
      deep: true,
      handler() {
        this.getOption(0)
      },
    },
  },
  mounted() {
    let that = this
    this.$nextTick(() => {
      that.drawChat()
    })
  },
  activated() {
    // 只有设置了keep-alive才生效
    this.$nextTick(() => {
      if (document.getElementById(this.chatId).clientHeight === 0) {
        console.log('activated...')
        this.myChart.resize()
      }
    })
  },
  methods: {
    drawChat() {
      var chartDom = document.getElementById(this.chatId)
      this.myChart = echarts.init(chartDom, null, { renderer: 'svg' })
      this.getOption(1)
    },
    getOption(type) {
      this.option = {
        grid: {
            left: '0%',
            right: '4%',
            bottom: '4%',
            top: '15%',
            containLabel: true
        },
        tooltip: {
          show: true,
          trigger: 'axis',
          axisPointer: {
            type: 'none'
          },
          borderWidth: 0,
          borderColor: '#104db1',
          backgroundColor: '#104db1',
          textStyle: {
            color: '#fff'
          }
        },
        legend: {
            left: '0',
            icon: 'rect',
            textStyle: {
              color: '#ffffff',
              fontSize: 10
            },
            itemWidth: 14
        },
        xAxis: {
            type: 'category',
            data: this.dataInfo.xAxis,
            axisLabel: {
              color: '#fff'
            },
            boundaryGap: false,
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            }
        },
        yAxis: {
            show: true,
            type: 'value',
            axisLabel: {
              color: '#fff'
            },
            splitLine: {
                show: false
            }
        },
        series: [
            {
                data: this.dataInfo.data1,
                type: 'line',
                smooth: true,
                name: '主板',
                showSymbol: false,
                lineStyle: {
                    color: '#1e74f3'
                },
                areaStyle: {
                    opacity: 0.6,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: '#2061c2'
                    }, {
                      offset: 0.8,
                      color: '#000051'
                    }])
                },
                emphasis: {
                    focus: 'series'
                },
                zlevel: 1
            },
            {
                data: this.dataInfo.data2,
                type: 'line',
                smooth: true,
                name: '矿机',
                showSymbol: false,
                lineStyle: {
                    color: '#00ffda'
                },
                areaStyle: {
                    opacity: 0.6,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: '#08eccb'
                    }, {
                      offset: 0.8,
                      color: '#000051'
                    }])
                },
                emphasis: {
                    focus: 'series'
                },
                zlevel: 2
            },
            {
                data: this.dataInfo.data3,
                type: 'line',
                smooth: true,
                name: '内存条',
                showSymbol: false,
                lineStyle: {
                    color: '#ffa916'
                },
                areaStyle: {
                    opacity: 0.6,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#ffa916'
                    }, {
                        offset: 0.8,
                        color: '#000051'
                    }])
                },
                emphasis: {
                    focus: 'series'
                },
                zlevel: 2
            }
        ]
      }
      this.myChart.setOption(this.option, true)
      if (!type) return
      window.addEventListener('resize', this.listenResize)
    },
    listenResize() {
      let resizeTimer = setTimeout(() => {
        clearTimeout(resizeTimer)
        this.fontSize = (window.fontSize || 100) * 0.12
        this.getOption(0)
        this.myChart.resize()
      }, 100)
    },
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.listenResize)
    if (!this.myChart) return
    this.myChart.clear()
  },
  deactivated() {
    window.removeEventListener('resize', this.listenResize)
    if (!this.myChart) return
    this.myChart.clear()
  },
}
</script>

<style>
.areaLineCharts {
  width: 100%;
  height: 96%;
  /* border: 1px solid wheat; */
}
</style>
